<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3">
<head>
    <div th:replace="authority/common/head"></div>
</head>
<body>

<div class="zsa-center">
    <div class="layui-container fly-marginTop">
        <div class="fly-panel fly-panel-user" pad20>
            <div class="layui-tab layui-tab-brief" lay-filter="user">
                <ul class="layui-tab-title">
                    <li class="layui-this">搜索框测试</li>
                </ul>
                <div class="layui-form layui-tab-content" id="LAY_ucm" style="padding: 20px 0;">
                    <div class="layui-tab-item layui-show">
                        <div class="layui-form layui-form-pane">
                            <!--/*@thymesVar id="loginUrl" type="java.lang.String"*/-->
                            <div id="container"></div>
                            <button id="btn" class="layui-btn" type="button"> 更新配置</button>
                            <hr>
                            <button id="btn1" class="layui-btn" type="button">打开搜索框</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <ul id="demoTree" class="dtree" data-id="0"></ul>
</div>

<div th:replace="authority/common/footer"></div>

<script>
    layui.extend({
        complexSearch: 'complexSearch/complexSearch' // {/}的意思即代表采用自有路径，即不跟随 base 路径
        // , dtree: 'dtree/dtree'
    });
    layui.use(['complexSearch'], function () {
        var complexSearch = layui.complexSearch;

        // 初始化静态搜索框
        var search1 = complexSearch.render({
            container: "#container",
            search: function (data) {
                console.log(data);
            },
            isDynamic: false,
            returnFormat: {
                fieldName: 'field1'
            },
            data: [
                {
                    field: 'name',
                    title: '姓名',
                    editType: 'text',
                    dataType: 'string',
                    formulas: ['=', '>', 'range'],
                    formula: 'range'
                },
                {field: 'age', title: '年龄', editType: 'number', formulas: ['range']},
                {
                    field: 'sex',
                    title: '性别',
                    editType: 'select',
                    options: [{key: '男', value: '1'}, {key: '女', value: '0'}],
                    dataType: 'int', formulas: ['=', 'in', 'notin'], formula: 'in'
                },
                {field: 'time', title: '创建时间', editType: 'date', formula: 'range'}
            ]
        });
        // 设置默认值
        search1.setDefaultValues([
            {field: 'sex', formula: 'in', value: [0, 1]},
            {field: 'age', formula: 'range', value: '11~~18'}
        ]);

        var num = 0;
        // 修改配置重新加载
        $('#btn').click(function () {
            num++;
            var config1 = {
                isDynamic: true, //设置为非静态
                data: [{},
                    {editType: 'text'}, //修改第二个字段的编辑类型（number）为 （text）
                ]
            };
            var config2 = {
                isDynamic: false
            };
            search1.reload(num % 2 === 0 ? config1 : config2);
        });

        // 初始化 动态搜索框形式
        var search2 = complexSearch.render({
            btn: "#btn1",
            search: function (data) {
                console.log(data);
            },
            width: 900,
            data: [
                {field: 'name', title: '姓名', editType: 'text', formulas: ['range']},
                {field: 'age', title: '年龄', editType: 'number'},
                {field: 'time', title: '创建时间', editType: 'date', dateType: 'year'},
                {
                    field: 'status',
                    title: '状态',
                    editType: 'select',
                    options: [{key: '有效', value: '1'}, {key: '无效', value: '0'}]
                }
            ]
        })
    });

</script>

</body>
</html>